<!DOCTYPE html>
<html>

<head>
  <title>Box-Shadow</title>
  <style>

    .box {
      border: 1px solid black;
      height: 100px;
      width: 100px;
      margin: 50px;
    }
  </style>
</head>

<body>
<h1>Box-shadow Tests</h1>

<div class="box" style="box-shadow: 20px 10px magenta">
  <p>box-shadow: 20px 10px magenta</p>
</div>

<div class="box" style="box-shadow: -40px -20px magenta">
  <p>box-shadow: -40px -20px magenta</p>
</div>

<div class="box" style="box-shadow: 20px 10px rgba(255,0,255,0.5)">
  <p>box-shadow: 20px 10px rgba(255,0,255,0.5)</p>
</div>

<div class="box" style="box-shadow: -40px -20px rgba(255,0,255,0.5)">
  <p>box-shadow: -40px -20px rgba(255,0,255,0.5)</p>
</div>

<div class="box" style="box-shadow: 20px 10px 5px magenta">
  <p>box-shadow: 20px 10px 5px magenta</p>
</div>

</body>
</html>
